<template>
  <view class="container">
    <view class="content">
      <text class="chapter-title">{{ chapter.title }}</text>
      <text class="chapter-content" v-html="chapter.content"></text>
    </view>
    <view class="buttons">
      <button @click="goToPreviousChapter">上一章</button>
      <button @click="goToNextChapter">下一章</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chapter: {}
    };
  },
  onLoad(options) {
    this.fetchChapterContent(options.chapterId);
  },
  methods: {
    async fetchChapterContent(chapterId) {
      const res = await this.$api.getChapterContent(chapterId);
      this.chapter = res.data;
    },
    goToPreviousChapter() {
      // 实现逻辑：跳转到上一章
    },
    goToNextChapter() {
      // 实现逻辑：跳转到下一章
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.content {
  margin-top: 20px;
}
.chapter-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.chapter-content {
  font-size: 18px;
  line-height: 1.5;
}
.buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
button {
  width: 48%;
  height: 50px;
  line-height: 50px;
  background-color: #007aff;
  color: #fff;
  border-radius: 10px;
}
</style>